<template>
  <div class="check-stand">
    <div class="left">
      <div class="title">
        <span>检测项目</span>
        <el-icon class="icon" title="新增检测项"><Plus /></el-icon>
      </div>
      <div class="check-item">
        <div
          :class="['item', checkValue == item.value ? 'active' : '']"
          v-for="item of checkList"
          :key="item.value"
          @click="checkValue = item.value"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="right">
      <div class="title">检测标准</div>
      <div class="table-form">
        <hcTable
          :table-data="tableData"
          :options="options"
          :columns="tableColumn"
        >
          <template #paramName="{ row }">
            <el-input v-model="row.paramName"></el-input>
          </template>
          <template #paramType="{ row }">
            <el-input v-model="row.paramType"></el-input>
          </template>
          <template #paramValue="{ row }">
            <el-input v-model="row.paramValue"></el-input>
          </template>
          <template #valueType="{ row }">
            <el-input v-model="row.valueType"></el-input>
          </template>
          <template #fontType="{ row }">
            <el-input v-model="row.fontType"></el-input>
          </template>
          <template #fontSize="{ row }">
            <el-input v-model="row.fontSize"></el-input>
          </template>
          <template #position="{ row }">
            <el-input v-model="row.position"></el-input>
          </template>
        </hcTable>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";

let checkList = ref([
  { name: "标签检测", value: "label" },
  { name: "卷盘检测", value: "reel" },
  { name: "包装袋检测", value: "bag" },
]);

let checkValue = ref("label");

let options = {
  showPagination: false,
  border: true,
};

let tableColumn = [
  { type: "index", width: "60", label: "序号", align: "center", fixed: true },
  { prop: "paramName", label: "字段名称", slot: "paramName" },
  { prop: "paramType", label: "字段属性", slot: "paramType" },
  { prop: "paramValue", label: "字段内容", slot: "paramValue" },
  { prop: "valueType", label: "类型", slot: "valueType" },
  { prop: "fontType", label: "字体格式", slot: "fontType" },
  { prop: "fontSize", label: "字体大小", slot: "fontSize" },
  { prop: "position", label: "起始坐标", slot: "position" },
];

let tableData = ref([
  {
    paramName: "标签名称",
    paramType: "string",
    paramValue: "标签名称",
    valueType: "string",
    fontType: "宋体",
    fontSize: "12",
    position: "10,10",
  },
]);
</script>
<style lang="scss" scoped>
.check-stand {
  color: #bbb;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  .left {
    width: 220px;
    border: 1px solid #ccc;
    padding: 0 10px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      height: 40px;
      .icon {
        cursor: pointer;
        &:hover {
          color: #09e5f5;
        }
      }
    }
    .check-item {
      height: calc(100% - 40px);
      overflow: auto;
      .item {
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 4px;
        margin-bottom: 10px;
        cursor: pointer;
      }
      .active {
        background: #409eff;
        color: #fff;
      }
    }
  }
  .right {
    flex: 1;
    border: 1px solid #ccc;
    border-left: none;
    padding: 0 10px;
    .title {
      height: 40px;
      line-height: 40px;
    }
    .table-form {
      height: calc(100% - 40px);
      padding: 0px;
      padding-bottom: 10px;
    }
  }
}
</style>
